<template>
    <div class="main-container my-login-container">
        <div class="main-content">
            <div class="row">
                <div class="col-sm-10 col-sm-offset-1" style="margin-top: 20vh">
                    <div class="login-container">
                        <div class="center">
                            <br><br><br>
                            <h1>
                                <i class="ace-icon fa fa-book green"></i>
                                <span class="green">图书借阅系统</span>
                                <span class="white" id="id-text2">后台管理</span>
                            </h1>
                            <h4 class="red" id="id-company-text">&copy; hermit网络科技</h4>
                        </div>

                        <div class="space-6"></div>

                        <div class="position-relative">
                            <div id="login-box" class="login-box visible widget-box no-border">
                                <div class="widget-body">
                                    <div class="widget-main">

                                        <div class="space-6"></div>

                                        <form>
                                            <fieldset>
                                                <label class="block clearfix">
							<span class="block input-icon input-icon-right">
								<input type="text" class="form-control" placeholder="请输入账号" v-model="userInfo.username"/>
								<i class="ace-icon fa fa-user"></i>
							</span>
                                                </label>

                                                <label class="block clearfix">
														<span class="block input-icon input-icon-right">
															<input v-bind:type="type" class="form-control" placeholder="请输入密码"
                                                                   v-model="userInfo.password"/>
                                                            <!--															<i class="ace-icon fa fa-lock"></i>-->
                              <i class="ace-icon fa fa-eye" v-on:click="changeType()" v-show="type==='text'"></i>
                              <i class="ace-icon fa fa-eye-slash" v-on:click="changeType()" v-show="type==='password'"></i>
														</span>
                                                </label>

                                                <div class="space"></div>

                                                <div class="clearfix">
                                                    <label class="inline">
                                                        <input v-model="remember" type="checkbox" class="ace"/>
                                                        <span class="lbl">记住密码</span>
                                                    </label>

                                                    <button type="button"
                                                            v-on:click="login()"
                                                            class="width-35 pull-right btn btn-sm btn-primary">
                                                        <i class="ace-icon fa fa-key"></i>
                                                        <span class="bigger-110">登陆</span>
                                                    </button>
                                                </div>

                                                <div class="space-4"></div>
                                            </fieldset>
                                        </form>
                                    </div><!-- /.widget-main -->
                                </div><!-- /.widget-body -->
                            </div><!-- /.login-box -->
                        </div><!-- /.position-relative -->

                        <div class="navbar-fixed-top align-right">
                            <a id="btn-login-dark" href="#">欢迎</a>
                        </div>
                    </div>
                </div><!-- /.col -->
            </div><!-- /.row -->
        </div><!-- /.main-content -->
    </div><!-- /.main-container -->
</template>

<script>

  import loginApi from "../api/work/login";
  import {apiDefaultErrorHandler} from "../api/base";

  export default {
    name: 'login',
    data() {
      return {
        userInfo: {},
        remember: false,
        LOCAL_KEY_LOGIN_USER: LOCAL_KEY_LOGIN_USER,
        type: "password",
      };
    },
    mounted: function () {
      let _this = this;
      $('body').remove('no-skin');
      $('body').attr('class', 'login-layout blur-login');
      let rememberUser = LocalStorage.get(LOCAL_KEY_LOGIN_USER);
      if (rememberUser) {
        _this.userInfo = rememberUser;
        // console.log("缓存中的账号密码:"+ _this.userInfo.username +"/" + _this.userInfo.password);
      }
    },
    methods: {
      login() {
        let _this = this;
        Loading2.show();
        loginApi.login(_this.userInfo).then(({data}) => {
          if (this.$http.isResponseSuccess(data)) {
            if (data.res.username !== null && data.res.password !== null) {
              // 登录成功 保存当前登陆信息
              let loginUser = data.res;
              Tool.setLoginUser(data.res);
              console.log("是否记住账号密码：" + _this.remember);
              if (_this.remember) {
                LocalStorage.set(LOCAL_KEY_LOGIN_USER, {
                  username: loginUser.username,
                  password: _this.userInfo.password,
                });
              } else {
                LocalStorage.set(LOCAL_KEY_LOGIN_USER, null);
              }
              // 页面跳转
              if (loginUser.loginType === 0) {
                _this.$router.push("welcome");
              } else if (loginUser.loginType === 1) {
                _this.$router.push("member/member");
              }
            } else {
              // 登录失败
              toast.warning("用户不存在或密码错误");
              _this.userInfo.password = "";
            }
          } else {
            apiDefaultErrorHandler(data)
          }
        }).catch((ex) => {
          apiDefaultErrorHandler(ex)
        })
        Loading2.hide();
      },
      changeType() {
        let _this = this;
        if (_this.type === "password") {
          _this.type = "text";
        } else {
          _this.type = "password";
        }
      }
    }
  }
</script>
<style scoped>
    .input-group-addon {
        padding: 0;
    }

    .my-login-container {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        min-width: 1000px;
        z-index: -10;
        zoom: 1;
        background: url(../../assets/book1.jpg) no-repeat;
        background-size: cover;
        -webkit-background-size: cover;
        -o-background-size: cover;
        opacity: 0.9;
    }
</style>